<template>
  <div>
    <template v-if="!userInfo">
      <div class="imgBox">
        <div class="imgBox_inner">
          <p class="inner_tit">私人音乐空间,听我想听的歌</p>
          <div class="inner_desc">登录管理我的音乐,多终端同步</div>
          <span class="inner_btn" @click="toLogin">立即登录</span>
        </div>
      </div>
      <Login />
    </template>
    <template v-else>
      <!-- top -->
      <div class="topOuter">
        <div class="topInner">
          <div class="userImg">
            <img :src="userInfo.avatarUrl" alt />
          </div>
          <h1 class="username">
            <span>{{userInfo.nickname}}</span>
          </h1>
          <ul class="fans">
            <li class="fansFirst">
              <strong>6</strong>
              <span>关注</span>
            </li>
            <li>
              <strong>0</strong>
              <span>粉丝</span>
            </li>
          </ul>
          <div class="topList">
            <a class="total">我喜欢</a>
            <a>我的已购</a>
            <a>我创建的歌单</a>
            <a>关注</a>
            <a>粉丝</a>
            <a>我上传的视频</a>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="tabBar">
          <a class="total">歌曲{{ likeSongCount }}</a>
          <a>歌单{{ likeSongListCount }}</a>
          <a>专辑0</a>
          <a>视频0</a>
        </div>
        <div class="button">
          <a class="iconfont el-icon-video-play active">播放全部</a>
          <a class="iconfont el-icon-circle-plus-outline">添加到</a>
          <a class="iconfont el-icon-download">下载</a>
          <a class="iconfont el-icon-finished">批量操作</a>
        </div>
        <el-table :data="likeSongList" stripe style="width: 100%">
          <el-table-column type="index" width="80"></el-table-column>
          <el-table-column label="歌曲">
            <template slot-scope="{row}">
              <span class="myMusic-song" @click="toMusicPlayer(row.id)">{{row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ar[0].name" label="歌手"></el-table-column>
          <el-table-column prop="al.name" label="专辑"></el-table-column>
          <el-table-column label="时长" width="80">
            <template slot-scope="{ $index }">{{ songTime[$index] }}</template>
          </el-table-column>
        </el-table>
      </div>
      <!-- bottom -->
      <div class="bottom">
        <p>查看更多内容，请下载客户端</p>
        <a href="#" class="bottom-btn">立刻下载</a>
      </div>
    </template>
  </div>
</template>

<script>
import { getUserInfo, getListDetail, getSongDetail } from "../../api/myMusic";

import moment from "moment";
import Login from "../../components/Login";
export default {
  name: "myMusic",
  data() {
    return {
      likeSongList: [],
      likeSongId: "",
      likeSongListCount: 0,
      likeSongCount: 0,
      songTime: "",
      userInfo: this.$store.state.userInfo,
    };
  },
  computed: {
    user() {
      return this.$store.state.userInfo;
    },
  },
  watch: {
    user(user) {
      this.userInfo = user;
      this.getMyMsic();
    },
  },
  mounted() {
    if (!this.$store.state.userInfo) return;
    this.getMyMsic();
  },
  components: {
    Login,
  },
  methods: {
    toLogin() {
      this.$store.commit("VISIBLE", true);
    },
    async getMyMsic() {
      const { playlist } = await getUserInfo(
        this.$store.state.userInfo.uid + ""
      );
      this.likeSongListCount = playlist.length;
      this.likeSongId = playlist[0].id;
      const res = await getListDetail(this.likeSongId);
      this.likeSongCount = res.playlist.tracks.length;
      let songList = res.playlist.tracks.splice(0, 10);
      songList = songList.map((item) => {
        return item.id;
      });
      let { songs } = await getSongDetail(songList.toString());
      this.likeSongList = songs;
      this.songTime = this.likeSongList.map((item) => {
        return (item.dt = moment(item.dt).format("mm:ss"));
      });
      // this.likeSongList.push(this.songTime)
    },
    toMusicPlayer(id) {
      this.$router.push({
        name: "MusicPlayer",
        query: {
          songId: id,
        },
      });
    },
  },
};
</script>

<style scoped>
/* imgBox开始 */
.imgBox {
  height: 622px;
  width: 100%;
  /* border: 1px solid red; */
  box-sizing: border-box;
  background-image: url("../../../public/images/bg_profile_unlogin.69aad5de.jpg");
  position: relative;
}
.imgBox .imgBox_inner {
  font-family: Arial, "Microsoft YaHei";
  color: #eeeeee;
  text-align: center;
  height: 174px;
  width: 1200px;
  max-width: 1200px;
  /* border: 1px solid green; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.imgBox .imgBox_inner .inner_tit {
  font-size: 50px;
  height: 60px;
  margin: 0 auto;
}
.imgBox .imgBox_inner .inner_desc {
  font-size: 22px;
  height: 26px;
  margin: 20px 0;
}
.imgBox .imgBox_inner .inner_btn {
  display: block;
  font-size: 18px;
  text-align: center;
  height: 46px;
  width: 130px;
  margin: 0 auto;
  margin-top: 20px;
  line-height: 48px;
  word-spacing: 0;
  background-color: #31c27c;
  border: rgb(255, 255, 255, 0.3) solid 1px;
  /* border-radius: 2px; */
  cursor: pointer;
}
.inner_btn:hover {
  color: rgb(255, 255, 255);
  border-color: #fff;
  outline: rgb(255, 255, 255, 0.9) solid 1px;
}
/* top */
.total {
  color: #2caf6f !important;
}
.topOuter {
  height: 315px;
  background: url("../../assets/background.jpg") 50% no-repeat;
  padding-top: 65px;
  background-size: cover;
  text-align: center;
}
.topInner {
  min-width: 1200px;
  height: 315px;
  position: relative;
  margin: 0 auto;
}
.userImg {
  width: 102px;
  height: 102px;
  margin: 0 auto;
}
.userImg img {
  display: block;
  width: 100%;
  height: 100%;
  border: 4px solid #fff;
  border-radius: 99px;
  background-color: #fff;
}
.username {
  margin: 15px auto;
  font-size: 30px;
  color: #fff;
}
.fans li {
  display: inline-block;
  padding: 0 25px;
  font-size: 22px;
  color: #fff;
}
.fans strong {
  display: block;
}
.fansFirst {
  border-right: 1px solid #24313d;
}
.topList {
  position: absolute;
  top: 260px;
  margin-left: 125px;
  width: 960px;
  height: 56px;
  line-height: 56px;
  text-align: left;
}
.topList a {
  font-size: 16px;
  margin-right: 40px;
  color: #fff;
  cursor: pointer;
}
.topList a:hover {
  color: #31c27c;
}

/* Box */
.box {
  width: 1200px;
  margin: 0 auto;
}
.tabBar {
  height: 56px;
  line-height: 56px;
}
.tabBar a {
  font-size: 16px;
  margin-right: 40px;
  color: #000;
  cursor: pointer;
}
.tabBar a:hover {
  color: #31c27c;
}
.button {
  padding-top: 50px;
  margin-bottom: 20px;
}
.button a {
  min-width: 122px;
  text-align: center;
  border: 1px solid #c9c9c9;
  border-radius: 2px;
  font-size: 14px;
  margin-right: 6px;
  height: 38px;
  line-height: 38px;
  color: #000;
  cursor: pointer;
}
.button .active {
  background-color: #2caf6f;
  border-color: #2caf6f;
  color: #fff;
}

/* bottom */
.bottom {
  height: auto !important;
  text-align: center;
  margin: 22px 0;
}
.bottom p {
  font-size: 18px;
  color: #000;
}
.bottom-btn {
  display: block;
  width: 175px;
  height: 41px;
  line-height: 41px;
  font-size: 16px;
  border-radius: 41px;
  color: #fff;
  margin: 20px auto 0;
  background-color: #31c27c;
}
.bottom-btn:hover {
  background-color: #2caf6f;
}
.myMusic-song {
  cursor: pointer;
}
.myMusic-song:hover {
  color: #31c27c;
}
</style>